<template>
  <!-- vue 编码但不渲染的标签 vue-fragment用 fragment 这个技术的原因,
    主要是为了把fragment 当成根节点 然后循环 template 标签
    因为 vue 默认的template 不能在根节点循环 但我又不想再去渲染多余的标签 -->
  <div class="submenu">
    <template v-for="item in list">
      <el-submenu v-if="item.childrens.length"
                  :index="item.url"
                  :key="item.id">
        <template slot="title">
          <i class="iconfont men_icon"
             v-html="item.icon"></i>
          <span>{{ item.name }}</span>
        </template>
        <SubMenu :list="item.childrens" />
      </el-submenu>

      <el-menu-item class="menu_item"
                    v-if="!item.childrens.length"
                    :index="item.url || item.name"
                    @click="clickMenu(item)"
                    :key="item.id">
        <template slot="title">
          <i class="iconfont"
             v-html="item.icon"></i>
          <span>{{ item.name }}</span>
        </template>
      </el-menu-item>
    </template>
  </div>
</template>
<script>
export default {
  name: 'SubMenu',
  props: {
    list: Array,
  },
  methods: {
    // 点击侧边栏
    clickMenu (item) {
      console.log(item)
      //将页面加入缓存中
      this.$store.commit('addKeepAliveCache', item.name)
      //将页面添加到tabList中
      this.$store.commit('clickMenu', item)
    },
  },
}
</script>
<style scoped>
.el-submenu >>> .el-submenu__title {
  /* padding: 0 25px !important; */
  /* padding-left: 28px !important; */
  display: flex;
}
.el-menu-item.is-active {
  color: #fff !important;
  background: #2d8cf0 !important;
}
.men_icon {
  font-size: 18px;
  padding-right: 10px;
}
.menu_item {
  /* padding: 0 55px !important; */
  display: flex;
}
</style>